State와 Props의 차이점

React에서 State와 Props는 컴포넌트를 구성하는 중요한 요소입니다. 이 두 가지는 서로 다른 역할을 가지고 있으며, 이를 제대로 이해하는 것이 React를 효율적으로 사용하는 데 필수적입니다. 아래에서는 State와 Props의 차이점을 구체적인 예시와 함께 설명하겠습니다.

State와 Props란 무엇인가?

State

State는 컴포넌트의 내부 데이터를 관리합니다. State는 동적으로 변경될 수 있으며, 이러한 변경은 컴포넌트의 재렌더링을 유발합니다. State는 일반적으로 사용자 입력, 요청 결과, 또는 기타 이벤트에 따라 변할 수 있는 데이터를 저장합니다.

예시 코드

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 코드에서 count는 State로 정의되었으며, setCount 함수를 통해 값이 변경됩니다. 버튼을 클릭할 때마다 count가 증가하고, 이는 컴포넌트를 재렌더링합니다.

Props

Props는 컴포넌트 간에 데이터를 전달하는 방법입니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 역할을 합니다. Props는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다.

예시 코드

function Greeting(props) {
  return <h1>안녕하세요, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React" />;
}

위 코드에서 Greeting 컴포넌트는 name이라는 Prop을 받아 화면에 출력합니다. App 컴포넌트에서 Greeting 컴포넌트로 name 값을 전달하고 있습니다.